import React, { useState } from "react";
import { NavBar, Form, Input, Radio, Button, Toast, Picker } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import '../styles/addPatient.scss'

// 关系选项
const relationOptions = [
    { label: '本人', value: '本人' },
    { label: '父母', value: '父母' },
    { label: '配偶', value: '配偶' },
    { label: '子女', value: '子女' },
    { label: '其他', value: '其他' },
];

const AddPatientPage: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [relationVisible, setRelationVisible] = useState(false);
  const [selectedRelation, setSelectedRelation] = useState('本人');

  // 处理返回按钮点击
  const handleBack = () => {
    navigate('/profile');
  }

  // 处理保存按钮点击
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      console.log('Received values of form: ', values);

      Toast.show({
        icon: 'success',
        content: '就诊人添加成功',
        afterClose: () => {
          navigate('/profile')
        }
      })
    } catch (error) {
      Toast.show({
        icon: 'fail',
        content: `请填写完整信息: ${error}`,
      })
    }
  }

  return (
    <div className="add-patient-page">
      {/* 顶部导航栏 */}
      <NavBar className="nav-bar" onBack={handleBack}>添加就诊人</NavBar>

      {/* 表单内容 */}
      <div className="form-container">
        <Form
          form={form}
          layout="horizontal"
          requiredMarkStyle="none"
          className="patient-form"
          footer={
            <Button block color="primary" type="submit" size="large" onClick={handleSubmit}>保存</Button>
          }
        >
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            name="idCard"
            label="身份证"
            rules={[{ required: true, message: '请输入身份证' }]}
          >
            <Input placeholder="请输入身份证" />
          </Form.Item>
          <Form.Item
            name="gender"
            label="性别"
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Radio.Group defaultValue="male">
              <Radio value="male">男</Radio>
              <Radio value="female">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="relation"
            label="关系"
            rules={[{ required: true, message: '请选择关系' }]}
            onClick={() => setRelationVisible(true)}
          >
            <div className="form-item-children">
              <span className={selectedRelation ? "" : "placeholder"}>
                {selectedRelation || '请选择关系'}
              </span>
            </div>
          </Form.Item>
          <Form.Item
            name="phone"
            label="手机号"
            rules={[{ required: true, message: '请输入手机号' }]}
          >
            <Input placeholder="请输入手机号" type="tel" />
          </Form.Item>
          <Form.Item
            name="isDefault"
            label="默认就诊人"
          >
            <Radio.Group defaultValue="false">
              <Radio value="true">是</Radio>
              <Radio value="false">否</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </div>

      {/* 关系选择器 */}
      <Picker
        columns={[relationOptions]}
        visible={relationVisible}
        onClose={() => setRelationVisible(false)}
        value={[selectedRelation]}
        onConfirm={val => {
          setSelectedRelation(val[0] as string);
          form.setFieldValue('relation', val[0]);
        }}
      />  
    </div>
  )
}

export default AddPatientPage;